<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师课堂行为分析系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', system-ui, sans-serif;
        }

        body {
            background: #f0f4f8;
            min-height: 100vh;
            color: #2c3e50;
        }

        /* 登录容器 */
        .auth-container {
            max-width: 400px;
            margin: 5rem auto;
            padding: 2.5rem;
            background: white;
            border-radius: 1.5rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transform: translateY(-20px);
            opacity: 0;
            animation: slideIn 0.6s ease forwards;
        }

        @keyframes slideIn {
            to { transform: translateY(0); opacity: 1; }
        }

        /* 主标题 */
        h2, h3 {
            color: #2c3e50;
            font-weight: 600;
        }

        h2 { 
            margin-bottom: 2rem;
            font-size: 1.8rem;
            text-align: center;
        }

        /* 表单元素 */
        select, input {
            width: 100%;
            padding: 1rem;
            margin: 0.8rem 0;
            border: 2px solid #e0e6ed;
            border-radius: 0.8rem;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        select:focus, input:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52,152,219,0.1);
            outline: none;
        }

        /* 密码输入框 */
        .password-field {
            position: relative;
        }

        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #7f8c8d;
            cursor: pointer;
            transition: all 0.3s;
        }

        .password-toggle:hover {
            color: #3498db;
        }

        /* 按钮样式 */
        button {
            background: linear-gradient(135deg, #3498db, #2980b9);
            color: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: 0.8rem;
            cursor: pointer;
            font-weight: 500;
            transition: transform 0.2s, box-shadow 0.2s;
            width: 100%;
            margin: 1rem 0;
        }

        button:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52,152,219,0.3);
        }

        button:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        /* 主仪表盘 */
        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 功能卡片 */
        .card {
            background: white;
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        /* 视频播放器 */
        .video-player {
            width: 100%;
            height: 300px;
            border-radius: 0.8rem;
            background: #1a1a1a;
            margin-top: 1rem;
        }

        /* 数据表格 */
        .data-table {
            width: 100%;
            margin-top: 1rem;
            border-collapse: collapse;
        }

        .data-table th {
            background: #f8f9fa;
            color: #7f8c8d;
            padding: 1rem;
            text-align: left;
            font-weight: 500;
        }

        .data-table td {
            padding: 1rem;
            border-bottom: 1px solid #f0f4f8;
        }

        .data-table tr:hover td {
            background: #f8f9fa;
        }

        /* 上传区域 */
        .upload-wrapper {
            border: 2px dashed #e0e6ed;
            border-radius: 1rem;
            padding: 2rem;
            text-align: center;
            margin: 1rem 0;
            transition: all 0.3s ease;
            position: relative;
        }

        .upload-wrapper:hover {
            border-color: #3498db;
            background: #f8faff;
        }

        .upload-label {
            cursor: pointer;
            display: block;
        }

        /* 进度条 */
        progress {
            width: 100%;
            height: 8px;
            border-radius: 4px;
            margin-top: 1rem;
        }

        progress::-webkit-progress-bar {
            background: #f0f4f8;
            border-radius: 4px;
        }

        progress::-webkit-progress-value {
            background: linear-gradient(90deg, #3498db, #2980b9);
            border-radius: 4px;
        }

        /* 错误提示 */
        .error-message {
            color: #e74c3c;
            font-size: 0.9rem;
            margin-top: 0.5rem;
            transition: opacity 0.3s, transform 0.3s;
            transform: translateY(-10px);
            opacity: 0;
            text-align: center;
        }

        .error-message.show {
            transform: translateY(0);
            opacity: 1;
        }

        /* 加载状态 */
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255,255,255,0.8);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 0.8rem;
        }

        .fa-spinner {
            animation: spin 1s linear infinite;
            margin-bottom: 0.5rem;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .dashboard {
                grid-template-columns: 1fr;
                padding: 1rem;
            }

            .auth-container {
                margin: 2rem auto;
                padding: 1.5rem;
            }
        }

        /* 头部样式 */
        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .logout-btn {
            width: auto;
            padding: 0.5rem 1rem;
            background: #e74c3c;
        }

        .logout-btn:hover {
            background: #c0392b;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 登录/注册界面 -->
        <div v-if="!isLoggedIn" class="auth-container">
            <h2>
                <i :class="isRegistering ? 'fa-user-plus' : 'fa-sign-in-alt'" class="fas"></i>
                {{ isRegistering ? '创建新账户' : '欢迎登录系统' }}
            </h2>

            <!-- 角色选择（仅注册时显示） -->
            <select v-if="isRegistering" v-model="userType" class="select-role">
                <option value="user">👩🏫 普通用户</option>
                <option value="admin">👨💼 管理员</option>
            </select>

            <!-- 动态表单 -->
            <div class="auth-form">
                <input type="text" 
                       v-model="username" 
                       :placeholder="isRegistering ? '设置用户名（4-16位字符）' : '请输入用户名'"
                       @keyup.enter="handleAuth">

                <div class="password-field">
                    <input :type="showPassword ? 'text' : 'password'"
                           v-model="password"
                           :placeholder="isRegistering ? '设置密码（至少8位，包含字母和数字）' : '请输入密码'"
                           @keyup.enter="handleAuth">
                    <i :class="showPassword ? 'fa-eye-slash' : 'fa-eye'"
                       class="fas password-toggle"
                       @click="showPassword = !showPassword"></i>
                </div>

                <!-- 注册时显示确认密码 -->
                <div v-if="isRegistering" class="password-field">
                    <input type="password"
                           v-model="confirmPassword"
                           placeholder="请再次输入密码"
                           @keyup.enter="handleAuth">
                </div>

                <!-- 错误提示 -->
                <div class="error-message" :class="{show: authError}">
                    <i class="fas fa-exclamation-circle"></i> {{ authError }}
                </div>

                <button @click="handleAuth" :disabled="isSubmitting">
                    <i v-if="isSubmitting" class="fas fa-spinner fa-spin"></i>
                    {{ isSubmitting ? '处理中...' : (isRegistering ? '立即注册' : '登录系统') }}
                </button>
            </div>

            <!-- 切换链接 -->
            <p class="auth-message">
                {{ isRegistering ? '已有账户？' : '没有账户？' }}
                <span @click="toggleAuthMode">
                    {{ isRegistering ? '立即登录' : '立即注册' }}
                </span>
            </p>
        </div>

        <!-- 主界面 -->
        <div v-else>
            <header class="dashboard-header">
                <h2>👋 欢迎回来，{{ username }}（{{ userType === 'admin' ? '管理员' : '普通用户' }}）</h2>
                <button @click="logout" class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i> 退出登录
                </button>
            </header>

            <div class="dashboard">
                <!-- 视频上传 -->
                <div class="card upload-section">
                    <h3><i class="fas fa-upload"></i> 视频上传</h3>
                    <div class="upload-wrapper">
                        <input type="file" @change="handleFileUpload" 
                               accept="video/*" hidden id="fileInput">
                        <label for="fileInput" class="upload-label">
                            <i class="fas fa-cloud-upload-alt fa-3x"></i>
                            <p>点击选择视频文件或拖拽到此区域</p>
                        </label>
                        <progress v-if="uploadProgress > 0" :value="uploadProgress" max="100"></progress>
                        <div v-if="isUploading" class="loading-overlay">
                            <i class="fas fa-spinner fa-2x"></i>
                            上传中，请稍候...
                        </div>
                    </div>
                </div>

                <!-- 视频播放 -->
                <div class="card player-section">
                    <h3><i class="fas fa-video"></i> 视频播放</h3>
                    <video class="video-player" controls :src="videoUrl" v-if="videoUrl"></video>
                    <div v-else class="video-placeholder">
                        <i class="fas fa-film fa-3x"></i>
                        <p>请先上传视频文件</p>
                    </div>
                </div>

                <!-- 数据分析 -->
                <div class="card data-section">
                    <h3><i class="fas fa-chart-bar"></i> 行为分析</h3>
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>行为类型</th>
                                <th>次数</th>
                                <th>时长</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in analysisData" :key="index">
                                <td>{{ item.type }}</td>
                                <td>{{ item.count }}次</td>
                                <td>{{ item.duration }}秒</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 数据导出 -->
                <div class="card export-section">
                    <h3><i class="fas fa-file-export"></i> 数据导出</h3>
                    <button @click="exportPDF" class="export-btn" :disabled="!analysisData.length">
                        <i class="fas fa-download"></i> 生成PDF报告
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    // 身份验证相关
                    isLoggedIn: false,
                    isRegistering: false,
                    isSubmitting: false,
                    authError: '',
                    userType: 'user', // 默认用户类型为普通用户
                    username: '',
                    password: '',
                    confirmPassword: '',
                    showPassword: false,
                    
                    // 文件上传相关
                    videoFile: null,
                    videoUrl: '',
                    uploadProgress: 0,
                    isUploading: false,
                    
                    // 分析数据
                    analysisData: [
                        { type: '站立讲解', count: 15, duration: 1200 },
                        { type: '走动巡视', count: 8, duration: 600 },
                        { type: '板书书写', count: 5, duration: 300 }
                    ],
                    
                    // 已注册用户信息存储
                    registeredUsers: []
                }
            },
            methods: {
                toggleAuthMode() {
                    this.isRegistering = !this.isRegistering;
                    this.clearForm();
                    this.$nextTick(() => {
                        this.$el.querySelector('input').focus();
                    });
                },
                
                clearForm() {
                    this.username = '';
                    this.password = '';
                    this.confirmPassword = '';
                    this.authError = '';
                    this.showPassword = false;
                },

                handleAuth() {
                    // 防止重复提交
                    if (this.isSubmitting) return;
                    this.isSubmitting = true;
                    this.authError = '';
                    
                    // 验证逻辑
                    if (this.isRegistering) {
                        const usernamePattern = /^[a-zA-Z0-9]{4,16}$/;
                        if (!usernamePattern.test(this.username)) {
                            this.authError = '用户名需为4-16位字母或数字';
                            this.isSubmitting = false;
                            return;
                        }
                        const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
                        if (!passwordPattern.test(this.password)) {
                            this.authError = '密码至少8位，且必须包含字母与数字组合';
                            this.isSubmitting = false;
                            return;
                        }
                        if (this.password !== this.confirmPassword) {
                            this.authError = '两次输入的密码不一致';
                            this.isSubmitting = false;
                            return;
                        }
                        
                        // 注册成功，保存用户信息
                        this.registeredUsers.push({
                            username: this.username,
                            password: this.password,
                            userType: this.userType
                        });
                    } else {
                        // 登录验证
                        const user = this.registeredUsers.find(u => u.username === this.username && u.password === this.password);
                        if (!user) {
                            this.authError = '用户名或密码错误';
                            this.isSubmitting = false;
                            return;
                        }
                        // 更新用户类型
                        this.userType = user.userType;
                    }

                    // 模拟API请求延迟
                    setTimeout(() => {
                        // 模拟注册/登录成功
                        if (this.username && this.password) {
                            this.isLoggedIn = true;
                            //this.clearForm();
                        } else {
                            this.authError = this.isRegistering 
                                ? '请填写完整的注册信息' 
                                : '请输入用户名和密码';
                        }
                        this.isSubmitting = false;
                    }, 800);
                },
                
                logout() {
                    this.isLoggedIn = false;
                    this.username = '';
                    this.password = '';
                    this.userType = 'user'; // 退出登录后重置为普通用户
                    this.videoUrl = '';
                    this.uploadProgress = 0;
                },
                
                handleFileUpload(e) {
                    const file = e.target.files[0];
                    if (!file) return;
                    
                    this.videoFile = file;
                    this.isUploading = true;
                    this.uploadProgress = 0;
                    
                    // 模拟上传进度
                    const interval = setInterval(() => {
                        this.uploadProgress += 10;
                        if (this.uploadProgress >= 100) {
                            clearInterval(interval);
                            this.videoUrl = URL.createObjectURL(file);
                            this.isUploading = false;
                            

                            // 模拟分析数据生成
                            this.generateAnalysisData();
                        }
                    }, 200);
                },
                
                generateAnalysisData() {
                    // 模拟分析结果
                    this.analysisData = [
                        { type: '站立讲解', count: Math.floor(Math.random() * 20) + 5, duration: Math.floor(Math.random() * 1500) + 500 },
                        { type: '走动巡视', count: Math.floor(Math.random() * 15) + 3, duration: Math.floor(Math.random() * 1000) + 200 },
                        { type: '板书书写', count: Math.floor(Math.random() * 10) + 1, duration: Math.floor(Math.random() * 800) + 100 }
                    ];
                },
                
                exportPDF() {
                    const { jsPDF } = window.jspdf;
                    const doc = new jsPDF();
                    
                    // 设置标题
                    doc.setFontSize(18);
                    doc.setTextColor(52, 152, 219);
                    doc.text('教师课堂行为分析报告', 105, 20, { align: 'center' });
                    
                    // 添加用户信息
                    doc.setFontSize(12);
                    doc.setTextColor(44, 62, 80);
                    doc.text(`用户名: ${this.username}`, 20, 30);
                    doc.text(`用户类型: ${this.userType === 'admin' ? '管理员' : '普通用户'}`, 20, 40);
                    doc.text(`生成时间: ${new Date().toLocaleString()}`, 20, 50);
                    
                    // 添加分析数据
                    doc.setFontSize(14);
                    doc.text('行为分析结果:', 20, 70);
                    
                    let yPos = 80;
                    this.analysisData.forEach(item => {
                        doc.setFontSize(12);
                        doc.text(
                            `${item.type}: ${item.count}次，总时长${item.duration}秒`, 
                            20, 
                            yPos
                        );
                        yPos += 10;
                    });
                    
                    // 保存PDF
                    doc.save(`教师行为分析_${this.username}_${new Date().toISOString().slice(0,10)}.pdf`);
                }
            },
            mounted() {
                // 初始化时检查本地存储
                const savedUserType = localStorage.getItem('userType');
                if (savedUserType) {
                    this.userType = savedUserType;
                }
            }
        });
    </script>
</body>
</html>